<template>
	<div class="content">
		<swiper :options="swiperOption" ref="mySwiper">
		    <!-- slides -->
		    <swiper-slide v-for="item of imgList" :key="item.id">
				<img class="img-item" :src="item.imgUrl" alt="去哪儿门票">
		    </swiper-slide>
		    <!-- Optional controls -->
		    <div class="swiper-pagination"  slot="pagination"></div>
		 </swiper>
	</div>
</template>
<script>
	export default{
		name:"HomeBanner",
		props:{
			imgList:Array
		},
		data(){
			return{
				swiperOption:{
					pagination:'.swiper-pagination',
					autoplay:3000,
					speed:500,
					loop:true,
					autoplayDisableOnInteraction:false
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.content{
		padding-bottom: 26.5%;
		height: 0;
		overflow: hidden;
		.img-item{
			width: 100%;
		}
		/deep/ .swiper-pagination-bullet-active{
			background:#fff;
		}
	}
</style>